<template>
	<view>
		<jiazai v-if="isshow"></jiazai>
		<block v-if="!isshow" class="animated fadeIn slow">
			<view class="top_five">
				<view class="title">官方榜</view>
				<view class="five u-f" v-for="(item,index) in topFour" :key="index"
				@tap="toplaylist" :data-id="item.id">
					<view class="pic">
						<image style="width: 100%;" :src="item.pic" mode="widthFix"></image>
					</view>
					<view class="info" >
						<view class="gengxin">{{item.gengxin}}</view>
						<view class="item u-f-ac" v-for="(item1,index) in item.tracks" :key="index">
							<text class="name eps-1">{{item1.first}}</text> 
							<text class="author eps-1">{{item1.second}}</text>
						</view>
					</view>
				</view>
				<view class="five u-f">
					<view class="pic">
						<image lazy-load style="width: 100%;" mode="widthFix"  :src="songer.pic"></image>
					</view>
					<view class="info">
						<view class="gengxin">{{songer.gengxin}}</view>
						<view class="item u-f-ac" v-for="(item,index) in songer.arr" :key="index" >
							<text class="name eps-1">{{item.first}}</text>
							<text class="author">{{item.third}}</text>
						</view>
					</view>
				</view>
			</view>	
			<view class="toplist">
				<view  class="title">全球榜</view>
				<view class="item">
					<view  class="pic" v-for="(item,index) in topList" :key="index"
					@tap="toplaylist" :data-id="item.id" >
						<image mode="widthFix" style="width: 100%;" :src="item.pic"></image>
					</view>
				</view>
			</view>	
		</block>
	</view>
</template>

<script>
	import jiazai from '../../home/jiazai/jiazai.vue';
	export default {
		components:{
			jiazai
		},
		data() {
			return {
				isshow:true,
				topFour:[],
				songer:{},
				topList:[]
				
			}
		},
		created() {
			this.getpaihang()
		},
		methods: {
			async getpaihang(){
				const result=await this.request({url: this.bsurl+'toplist/detail'}); 
 				this.topFour=result.list.splice(0,4).map(v=>{
					return{
						id:v.id,
						name:v.name,
						gengxin:v.updateFrequency,
						pic:v.coverImgUrl+'?param=130y130',
						tracks:v.tracks
					}
				});
				this.songer={
					arr:result.artistToplist.artists,
					name:result.artistToplist.name,
					gengxin:result.artistToplist.upateFrequency,
					pic:result.artistToplist.coverUrl+'?param=130y130'	
				};
				this.topList=result.list.map(v=>{
					return{
						id:v.id,
						name:v.name,
						pic:v.coverImgUrl+'?param=100y100'	
					}
				});
				if(this.isshow){
					if(this.Finish()){
						setTimeout(()=>{
							this.isshow=false
						}, 1000);
					}			
				}
			},
			toplaylist(e){
				let {id}=e.currentTarget.dataset;
				uni.navigateTo({
					url:'../playlist/playlist?id='+id
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.title{
		padding-left: 15upx;
		border-top:2upx solid #CCCCCC;
		border-bottom: 2upx solid #CCCCCC;
		font-size: 40upx;
		 font-weight: bolder;
	}
	.top_five{
		.five{
			padding: 5upx 0 5upx 0;	
			border-bottom: 1upx solid #CCCCCC;
			.pic{
				flex: 1;
			}
			.info{
				flex: 2;
				.gengxin{
					padding-top: 5upx;
					text-align:center;
					font-size: 36upx;
					font-weight: bold;
					color:#0082cf;
				}
				.item{
					padding: 10upx 0upx 10upx 8upx;
					height: 40upx;
					margin: 5upx 0 5upx 0;
					display: flex;
					.name{
						max-width: 450upx;
					}
					.author{
						min-width: 80upx;
						font-size: 26upx; 
						color: #666666;
						margin-left: 10upx;	
					}
				}
			}
			
		}
	}
	.toplist{
		.item{
			display: flex;
			flex-wrap: wrap;
		}
		.item>view:nth-of-type(3n-2){
			width:230upx;
			margin: 5upx 15upx 5upx 15upx;
		}
		.item>view:nth-of-type(3n-1){
			width:230upx;
			margin: 5upx 0upx 15upx 0upx;
		}
		.item>view:nth-of-type(3n)
		{
			width:230upx;
			margin: 5upx 15upx 5upx 15upx;
		}
	}

</style>
